<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        新增培训
      </p>
      <div id="nav_go5">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 新增培训 --start-->
    <div id="table_box10">
      <el-table :data="tableData" :max-height="500" border style="width: 98%;margin:0 auto">
        <el-table-column label width="180" prop="xuhao"></el-table-column>
        <el-table-column label="培训主题" prop="theme" width="180"></el-table-column>
        <el-table-column label="培训时间" prop="time"></el-table-column>
        <el-table-column label="参与人数" prop="num"></el-table-column>
        <el-table-column label="培训对象" prop="objs"></el-table-column>
        <el-table-column label="培训内容" prop="main"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      tableData: [{ xuhao: "", theme: "", time: "", num: "", objs: "", main: "", creater: 0 }],
      creater: 0,
      id: 0,
    };
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.id = this.$route.query.e;
    this.traindetail();
  },
  methods: {
    //返回
    revert () {
      this.$router.go(-1);
    },
    //培训详情数据
    traindetail () {
      var obj = { id: this.id };
      var objs = JSON.stringify(obj);
      let the = { index: 11, jsondata: objs };
      axios.post("/apis/PersonnelMatters.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        // console.log(list);
        this.tableData=[];
        if (list == null) { this.$message.error("数据异常"); } else { this.tableData.push(list.basemess); }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.distribute {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 32%;
      height: 50px;
      line-height: 50px;
      text-align: left;
    }
  }
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
#table_box10 {
  height: 570px;
  width: 98%;
  margin: 0 auto;
  background: $white;
  color: #909399;
  padding-top: 30px;
  table tr th {
    text-align: center;
    border: 1px solid #ebeef5;
  }
  table tr td {
    text-align: center;
    font-size: 14px;
    border: 1px solid #ebeef5;
  }
}
table {
  width: 98%;
  margin: 0 auto;
}
.bottom {
  text-align: center;
  margin-top: 10px;
}
</style>
<style>
#table_box10 .el-input__inner {
  border: none;
  outline: none;
}
#table_box10 .el-textarea__inner {
  border: none;
  outline: none;
  padding: 20px 1%;
}
#table_box10 .el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>